<template>
  <div class="container">
    <el-row class="mb10">
      <el-col :span="16" align="left">
        <div class="flex">
          <el-input clearable v-model="searchParams.projectname" placeholder="项目名称"
            style="width: 120px; margin-right: 15px">
          </el-input>

          <el-input clearable v-model="searchParams.applicationunit" placeholder="申报单位/项目负责人"
            style="width: 180px; margin-right: 15px">
          </el-input>

          <el-select clearable v-model="searchParams.completionperiod" placeholder="完成年限">
            <el-option :label="item.itemName" :value="item.itemValue" :key="item.itemValue"
              v-for="item in options.yearList" />data
          </el-select>

          <el-date-picker style="width: 233px; margin-right: 15px" v-model="data.time" type="daterange"
            range-separator="-" start-placeholder="申报开始日期" end-placeholder="申报结束日期" @change="dataPickerChange">
          </el-date-picker>

          <el-select clearable v-model="searchParams.status" placeholder="状态">
            <el-option :label="item.itemName" :value="item.itemValue" :key="item.itemValue"
              v-for="item in options.statusDate" />
          </el-select>
          <el-button color="#626aef" @click="getListData">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExport()"> 批量导出</el-button>
        <el-button type="primary" @click="handleExamina()">形式审查</el-button>
      </el-col>
    </el-row>
    <el-table :data="data.allTableData" style="width: 100%" class="center-table">
      <el-table-column width="55" align="center" prop="checked" label="选择">
        <template #default="{ row, $index }">
          <el-checkbox v-model="row.checked" @change="selectTable($event, row, $index)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="60px"></el-table-column>

      <ColumnData v-for="column of data.columns" :key="column.label" :item="column" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button size="small" class="ordinary" @click="handleEdit(row)">编辑</el-button>
          <el-button type="small" class="ordinary" @click="handleDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tc mt15">
      <el-pagination background v-model:current-page="data.page" v-model:page-size="data.pageSize"
        layout="prev, pager, next ,total,sizes,jumper" :total="data.total" :page-size="data.pageSize"
        @current-change="pageChange" />
    </div>

       <!--新增、修改、确认弹框-->
       <el-dialog
      class="global-dialog"
      v-model="data.dialogVisible"
      :lock-scroll="false"
      :append-to-body="false"
      width="950px"
      @closed="handleClose"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template >
        <div class="my-header">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
       
                <el-form
                  label-position="top"
                  :rules="rules"
                  ref="ruleFormRef"
                  :model="data.ruleForm"
                  status-icon
                >
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="项目名称" prop="projectname">
                        <el-input
                          placeholder="请输入"
                          v-model="data.ruleForm.projectname"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="申报单位" prop="applicationunitid">
                        <el-select
                          v-model="data.ruleForm.applicationunitid"
                          placeholder="请选择"
                          style="width: 100%"
                          @change="changeUnit"
                        >
                          <el-option
                            :label="el.name"
                            :value="el.id"
                            :key="k"
                            v-for="(el, k) in options.belongingunitList"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="项目负责人" prop="projectleaderid">
                        <el-select
                          @change="changeProject"
                          v-model="data.ruleForm.projectleaderid"
                          placeholder="请选择"
                          style="width: 100%"
                        >
                          <el-option
                            :label="el.username"
                            :value="el.userId"
                            :key="k"
                            v-for="(el, k) in options.yhrenList"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="联系电话" prop="telephone">
                        <el-input
                          maxlength="11"
                          placeholder="请输入"
                          v-model="data.ruleForm.telephone"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="完成年限" prop="completionperiod">
                        <el-select
                          v-model="data.ruleForm.completionperiod"
                          placeholder="请选择"
                          style="width: 100%"
                        >
                          <el-option
                            :label="item.itemName"
                            :value="item.itemValue"
                            :key="item.itemValue"
                            v-for="item in options.yearList"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="总投资(万元)" prop="totalinvestment">
                        <el-input
                          placeholder="请输入"
                          v-model="data.ruleForm.totalinvestment"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="申请中咨拨款(万元)" prop="applyfunding">
                        <el-input
                          placeholder="请输入"
                          v-model="data.ruleForm.applyfunding"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="申报日期" prop="reporttime">
                        <el-date-picker
                          v-model="data.ruleForm.reporttime"
                          placeholder="选择日期"
                          clearable
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row> </el-row>

                  <el-form-item label="主要研究内容" prop="researchcontents">
                    <el-input
                      v-model="data.ruleForm.researchcontents"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item label="主要技术经济指标" prop="mainindicators">
                    <el-input
                      v-model="data.ruleForm.mainindicators"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="创新点及可能获得的成果和知识产权"
                    prop="describetwo"
                  >
                    <el-input
                      v-model="data.ruleForm.describetwo"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="立项背景(包括项目背景、项目概况、研究的必要性等)"
                    prop="backdrop"
                  >
                    <el-input
                      v-model="data.ruleForm.backdrop"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item label="国内外研究概况及可行性分析" prop="analysis">
                    <el-input
                      v-model="data.ruleForm.analysis"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="项目研究的主要内容及技术指标(包括要解决的主要技术难点和问题，研究的创新点和内容、主要技术指标及其水平、提交的成果及形式等)"
                    prop="qualification"
                  >
                    <el-input
                      v-model="data.ruleForm.qualification"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="项目研究的技术路线(包括拟采取的技术路线，与后续技术改造或基本建设计划的衔接等)"
                    prop="roadmap"
                  >
                    <el-input
                      v-model="data.ruleForm.roadmap"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="推广应用前景及经济效益预测(包括市场需求或推广应用前景、经济效益，形成的生产能力或有关节约工程造价、缩短工期指标等)"
                    prop="forecast"
                  >
                    <el-input
                      v-model="data.ruleForm.forecast"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="申报单位和协作单位及分工(包括项目承担单位、主要协作单位（仅限中咨集团下属单位）简介及分工等)"
                    prop="dividethework"
                  >
                    <el-input
                      v-model="data.ruleForm.dividethework"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="项目进度计划(包括年度工作进度安排及完成期限等)(包括项目承担单位、主要协作单位（仅限中咨集团下属单位）简介及分工等)"
                    prop="programme"
                  >
                    <el-input
                      v-model="data.ruleForm.programme"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="项目经费预算" name="second">
              <Budget :fatherTableJson="data.tableJson"  :addFlag="data.addFlag"   @tableJson="changeBudget" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitForm()">保存</el-button>
        </span>
      </template>
    </el-dialog>


    <el-dialog v-model="data.detailVisible" :append-to-body="false" width="900px" @close="data.detailVisible = false"
      :show-close="false" :close-on-click-modal="false"
      >

      <div class="my-header">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane :initData="data.initData" label="详情信息" name="first">
       
                <el-form
                  label-position="top"
                  status-icon
                >
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="项目名称" >
                        <el-input
                          placeholder="请输入"
                          disabled
                          v-model="data.detail.projectname"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="申报单位">

                        <el-input
                          placeholder="请输入"
                          disabled
                          v-model="data.detail.applicationunit"
                          style="width: 100%"
                        />
                  
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="项目负责人">
                        
                        <el-input
                          placeholder="请输入"
                          disabled
                          v-model="data.detail.projectleader"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="联系电话">
                        <el-input
                          disabled
                          maxlength="11"
                          placeholder="请输入"
                          v-model="data.detail.telephone"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="完成年限">
                        <el-select
                          disabled
                          v-model="data.detail.completionperiod"
                          placeholder="请选择"
                          style="width: 100%"
                        >
                          <el-option
                            :label="item.itemName"
                            :value="item.itemValue"
                            :key="item.itemValue"
                            v-for="item in options.yearList"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="总投资(万元)">
                        <el-input
                          disabled
                          placeholder="请输入"
                          v-model="data.detail.totalinvestment"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="申请中咨拨款(万元)">
                        <el-input
                           disabled
                          placeholder="请输入"
                          v-model="data.detail.applyfunding"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="申报日期">
                        <el-date-picker
                          disabled
                          v-model="data.detail.reporttime"
                          placeholder="选择日期"
                          clearable
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row> </el-row>

                  <el-form-item label="主要研究内容" >
                    <el-input
                      disabled
                      v-model="data.detail.researchcontents"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item label="主要技术经济指标" >
                    <el-input
                      disabled
                      v-model="data.detail.mainindicators"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="创新点及可能获得的成果和知识产权"
          
                  >
                    <el-input
                      disabled
                      v-model="data.detail.describetwo"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="立项背景(包括项目背景、项目概况、研究的必要性等)"
                  
                  >
                    <el-input
                      disabled
                      v-model="data.detail.backdrop"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item label="国内外研究概况及可行性分析" prop="analysis">
                    <el-input
                      disabled
                      v-model="data.detail.analysis"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="项目研究的主要内容及技术指标(包括要解决的主要技术难点和问题，研究的创新点和内容、主要技术指标及其水平、提交的成果及形式等)"
                    
                  >
                    <el-input
                      disabled
                      v-model="data.detail.qualification"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="项目研究的技术路线(包括拟采取的技术路线，与后续技术改造或基本建设计划的衔接等)"
                 
                  >
                    <el-input
                      disabled
                      v-model="data.detail.roadmap"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="推广应用前景及经济效益预测(包括市场需求或推广应用前景、经济效益，形成的生产能力或有关节约工程造价、缩短工期指标等)"
                   
                  >
                    <el-input
                      disabled
                      v-model="data.detail.forecast"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="申报单位和协作单位及分工(包括项目承担单位、主要协作单位（仅限中咨集团下属单位）简介及分工等)"
               
                  >
                    <el-input
                       disabled
                      v-model="data.detail.dividethework"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>

                  <el-form-item
                    label="项目进度计划(包括年度工作进度安排及完成期限等)(包括项目承担单位、主要协作单位（仅限中咨集团下属单位）简介及分工等)"
                   
                  >
                    <el-input
                      disabled
                      v-model="data.detail.programme"
                      :autosize="{ minRows: 2, maxRows: 6 }"
                      type="textarea"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.detailVisible = false">关闭</el-button>
        </span>
      </template> 

    </el-dialog>
    <!-- :checkId子页面接受的数据    "data.tableItem.id"：父页面传输的数据   -->
    <Dialog :dialog="data.examinationVisible" @changeDialog="changeDialog" title="形式审查" :checkId="data.tableItem.id">
    </Dialog>
    <!--新增、修改、确认弹框-->
  </div>
</template>
<script lang="js">
import * as proxy from "@/constants/proxy";
import request from "@/utils/request";
import { getDetailById, getExportApply } from '@/views/project/api/projectApplication';
import ColumnData from '@/views/science/components/table/column-data.vue';
import { Modals } from "@/views/science/components/tips/tips";
import platformFiles from "@/views/science/technologyStrength/components/platformFiles/platformFiles.vue";
import { ElMessage } from "element-plus";
import moment from "moment";
import { reactive, ref } from "vue";
import Budget from "./components/budget.vue";
import Dialog from "./components/dialog.vue";
import tableData from "./tableHeader.json";

export default {
  components: {
    platformFiles,
    Budget,
    Dialog,
    ColumnData
  },
  props: {
    initData: {
      type: Object,
      required: true,
    },
    initNum: {
      type: Object,
      required: true,
    },
  },
  setup(props, { emit }) {
    //列表显示的字段
    //模态框以及信息栏是否显示
    let data = reactive({
      dialogVisible:false,
      allTableData: [],
      tableItem: { id: '', },//当前选中的行


      selectArr: [],
      checkId: "",
      examinationVisible: false,
      page: 1,
      pageSize: 10,
      total: 0,
      detail:{},
      detailForm: {
        reporttime: null,
      },
      detailVisible: false,
      columns: tableData.lxsqTableHeader,
      time: [],
      initData: {},
      persionDialogVisible: false, //  选择参与人员弹框
      ruleForm: {
        applicationunit: "",
        projectleader: "",
        type: 2,
      },
      files: [],

    });

    let editId = "";
    const handleEdit = async (row) => {

      data.tableJson = [];

      editId = row.id;
      

      let res = await getDetailById(row.id)

      if (res.data.success) {
        data.ruleForm={...res.data.data.info}
        data.tableJson=res.data.data.contractBudgetList
        console.log('编辑按钮',data.tableJson);
      }
      data.addFlag = 1;
      data.dialogVisible = true;

    };


    let loading = ref(true);
    // 查询参数
    let searchParams = reactive({
      type: 2,
      startTime: null,
      endTime: null,
    });
    //单选
    const selectTable = (e, row, index) => {
      console.log(e, row, index)

      const data1 = data.allTableData 
      return
      //遍历表格的数据，将非本行的所有数据的checked属性置为false，即取消选择
      for (let i in data1) {
        if (i == index) {
          (data1[i]).checked = e
        } else {
          (data1[i]).checked = false
        }
      }
      data.allTableData = data1
      if (e) {
        data.tableItem = row
      } else {
        data.tableItem = { id: '' }
      }

    }
    const options = reactive({
      yearList: [
        { itemName: "2023年", itemValue: 2023 },
        { itemName: "2022年", itemValue: 2022 },
        { itemName: "2021年", itemValue: 2021 },
        { itemName: "2020年", itemValue: 2020 },
        { itemName: "2019年", itemValue: 2019 },
      ],
      statusDate: [
        { itemName: "待审查", itemValue: "1" },
        { itemName: "审查通过", itemValue: "2" },
        { itemName: "已驳回", itemValue: "3" },
      ],
      unitnameList: [],
      affiliationList: [],
      SoftnessList: [],
      classnameList: [],
      competitionclassList: [],
      belongingunitList: [],
      awardList: [],
      zlztList: [],
      jsflList: [],
      xmlbList: [],
      yhrenList: [],
    });

    const changeDialog = () => {
      data.tableItem.id = '';
      getListData()
      data.examinationVisible = false;
    };
    // 清除日期选择器,删除的时候将日期清空
    const dataPickerChange = () => {
      if (data.time) {
        searchParams.startTime = data.time[0];
        searchParams.endTime = data.time[1];
      } else {
        searchParams.startTime = null;
        searchParams.endTime = null;
        data.time = [];
      }
    };

    const pageChange = (current) => {
      data.page = current;
      getListData();
    };
    const getListData = async () => {
      data.selectArr = [];
      loading.value = true;
      return request({
        url: proxy.CHECC_API_CMS + "/xmzx/kyxmlxps/approvalApplication/getTotalList",
        method: "post",
        data: {
          ...searchParams,
          page: data.page,
          pageSize: data.pageSize,
        },
      })
        .then((res) => {
          let resData = res.data.data.records;
          //草稿、待审批、审批通过、审批拒绝
          resData.map((item) => {
            if (item.status == 1) {
              item.status = "待审查";
            } else if (item.status == 2) {
              item.status = "审批通过";
            } else if (item.status == 3) {
              item.status = "审批拒绝";
            }
            if (item) {
              item.reporttimeFormat = moment(item.reporttime).format("YYYY-MM-DD");
            }


          });

          //给数据添加checked属性并默认置为false
          for (let index in res.data.data.records) {

            res.data.data.records[index].checked = false
          }

          data.allTableData = res.data.data.records;


          data.total = res.data.data.total;
        })
        .finally(() => {
          loading.value = false;
        });
    };
    getListData();
    //形式审查
    const handleExamina = () => {

      if (!data.tableItem.id) {

        ElMessage({
          message: "请选择",
          type: "warning",
        });
        return false
      }

      data.examinationVisible = true;
    };
    //主页面表格初始化
    //新增
    const ruleFormRef = ref();

    const handleClose = () => {
      for (let key in data.ruleForm) {
        data.ruleForm[key] = "";
      }
    };

    const ruleForm = reactive({});

    //详情
    let handleDetail = async (row) => {

      let res = await getDetailById(row.id)

      if (res.data.success) {

        data.detail = res.data.data.info

        data.detailVisible = true;
      }

    };



    const getExport = async () => {
      Modals('是否导出全部数据', '提示', 'warning').then(async () => {
        await getExportApply(searchParams, '形式审查')
      }).catch(() => {
        console.log("点击了取消")
      })
    };
    //page分页
    let getpageData = () => {
      data.selectArr = [];
      getListData();
    };

    const activeName = ref("first");
    return {
      data,
      dataPickerChange,
      selectTable,
      handleExamina, // 审核
      handleClose,
      handleDetail, //确认
      getListData, // 获取列表信息
      getpageData, // 分页信息
      pageChange,
      getExport,
      options, //维护单位字典
      searchParams,
      activeName,
      changeDialog,
      handleEdit
      //审核
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}


:deep(.center-table td),
:deep(.center-table th) {
  text-align: center !important;
}

:deep(.center-table) {
  margin-top: 15px;
}

.el-col {
  line-height: 40px;
}

.el-form-item {
  .el-input {
    width: 100px;
    background-color: aliceblue;
  }

  .el-select {
    width: 100px;
  }
}

.custom-color {
  color: red !important;
  /* 确保优先级高于其他样式 */
}

:deep(.el-dialog__header) {
    display: none;
}

.el-table th {
  background-color: #f0f0f0;
  /* 修改表头背景色 */
  color: #333;
  /* 修改表头文字颜色 */
}
:deep(.demo-tabs > .el-tabs__content) {
    max-height: 500px;
    
    overflow-y: scroll;

    scrollbar-width: none;

    -ms-overflow-style: none;
}


.demo-tabs>.el-tabs__content {
  padding: 320px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.open-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/deep/ .el-dialog__body {
  display: block !important;
}

.mt15 {
  margin-top: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

.tc {
  text-align: center;
}

.info {
  display: flex;
}

thead .el-table-column--selection .cell {
  display: none !important;
}
</style>
